import React from "react";
import ProgressView from "../../../view/ProgressView";
import { Actions, NameSpace } from "../../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../../css/attendance.module.css";
import { locationTo } from "../../../utils/LocationUtil";
import * as locations from '../../../const/locations'
import { Debt, Attend, AVATAR } from "../../../const/imgs"
import Scroll from '../Bscroll/index'
import { getTOKEN, setInfo } from "../../../utils/StorageUtil";
import { dailyList } from "../../../service/AttendService"
class DailyScreen extends React.Component {
  constructor(props) {
    super(props);
    this.CURRENT_PAGE = 1;
    this.PER_PAGE = 5;
    this.state = {
      dailyList: [],
      len:this.PER_PAGE,
    };
  }
  componentDidMount() {
    this.CURRENT_PAGE = 1;
    this.getDailyList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE,

    })
  }
  navigate = (id) => {
    this.props.setDailyId(id)
    setInfo('dailyId', id)
    locationTo(locations.DAILY)
  }
  pullingUp = () => {
      this.getDailyList({
        current_page: this.CURRENT_PAGE,
        per_page: this.PER_PAGE
      })
   
  }
  getDailyList = (params) => {
    this.setState({ loading: true })
    dailyList({
      token: getTOKEN(),
      is_self: this.props.isSelf,
      ...params
    })
      .then(
        res => {
          this.setState({ loading: false })
          if (res.error_code === 0) {
            this.setState({
              dailyList: [...this.state.dailyList, ...res.data.data],
              len:res.data.data.length
            })
            this.CURRENT_PAGE++
          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  render() {
    const {
      // hasMore,
      isShowMore,
      dailyList,
      loading
    } = this.state
    return (
      <div className={styles['container']}>
        <Scroll
          ref='scroll'
          click={true}
          bounce={true}
          pullUpLoad={true}
          pullUpLoadMoreData={this.pullingUp}
          isPullUpTipHide={true}
          isShowMore={isShowMore}
        >
          <div className={styles['attend_container']}>
            <div className={styles['stat_item_w']}
              onClick={() => {
                locationTo(locations.ADD_DAILY)
              }}
            >          <div className={styles['stat_item_key']}>
                <img src={Attend.SQJL} alt='' style={{ width: '16px', marginRight: '5px' }} />
                去写日报
          </div>
              <div className={styles['stat_item_value']}>
                <img src={Debt.YJT} alt='' style={{ width: '8px' }} />
              </div>
            </div>
          </div>
          {dailyList.map((item, index) => {
            return (
              <DailyItem key={item.id} item={item} navigate={this.navigate} />
            )
          })}
        </Scroll>
        <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM} />

      </div>
    );
  }
}

const DailyItem = ({ navigate, item: { id, date, sex, finish, user_name, } }) => {
  return (
    <div className={styles['attend_container']}>
      <div className={styles['stat_item_w']} style={{ height: '68px' }}>
        <div className={styles['record_info']}>
          <div className={styles['record_avatar']} style={{ width: '40px', height: '40px', borderRadius: '50%' }}>
            <img src={parseInt(sex, 10) === 1 ? AVATAR.male : AVATAR.famale} alt='' style={{ width: '40px' }} />
          </div>
          <div>
            <div className={styles['stat_item_key']} style={{ fontSize: '15px', fontWeight: '600' }}>
              {user_name}
            </div>
            <div className={styles['stat_item_value']}>
              {date}
            </div>
          </div>
        </div>
      </div>

      <div className={styles['stat_item_w']} style={{ height: '26px', fontWeight: '600' }} >
        今日完成工作
      </div>
      <div className={styles['attend_item_w']}
        style={textStyle} >
        {finish}
      </div>
      <div className={styles['stat_item_w']}>
        <div className={styles['text_center']}
          style={{
            borderTop: '0.5px solid #eee',
            color: '#ff9d03'
          }}
          onClick={() => navigate(id)}
        >
          查看全文
      </div>
      </div>
    </div>
  )
}
const textStyle = {
  height: '60px',
  fontSize: '12px',
  lineHeight: '20px',
  color: "#9ea2ac",
  textIndent: '2rem'
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setDailyId(id) {
      let params = {
        dailyId: id,
      };
      dispatch(Actions.actionSetDailyId(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(DailyScreen);
// export default DailyScreen;
// 